// 引入初始化样式文件
import '@/style/common.scss'

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import App from './App.vue'
import router from './router'

// 图片懒加载，采用的 vueUse 库文件（指令已经写成插件，所以不需要引入框架）
// import { useIntersectionObserver } from '@vueuse/core'
const app = createApp(App)
const pinia = createPinia()

// 引入懒加载指令插件并注册
import { lazyPlugin } from '@/directives/index.js'

// 引入全局组件插件
import { componentPlugin } from './components'

// app.use(createPinia())
// 注册持久化插件
pinia.use(piniaPluginPersistedstate)
app.use(pinia)
app.use(router)
app.use(lazyPlugin)
app.use(componentPlugin)
app.mount('#app')


// 定义全局指令（将全局指令写成插件，directives文件中）
// app.directive('img-lazy', {
//   mounted(el, binding) {
//     // el：指令绑定的那个元素 img
//     // binding：binding.value 指令等于号后面绑定表达式的值，图片url
//     console.log(el, binding.value)
//     useIntersectionObserver(el, ([{ isIntersecting }]) => {
//       if ( isIntersecting ) {
//         // isIntersecting 是一个bool类型，为true时候证明图片进入可视区域
//         // 图片进入可视区，就需要请求图片地址
//         // console.log(isIntersecting) 
//         el.src = binding.value
//       }
//     })
//   }
// })
